<template>
  <div class="attibule"> 
      <div class="top">
       
    <el-form :inline="true" >
    <el-form-item label="名称">
     <el-input v-model="ruleForm.input" placeholder="属性名称" style="width:200px" @input="inputFn"></el-input>
     </el-form-item>


    <el-form-item label="分类" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择">
      <el-option :label="item.name" :value="item.id"  v-for="item in category" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
 
 
     <el-button type="primary" class="bianji" @click="queryFn">查询</el-button>
     <el-button type="primary" class="bianji" @click="addFn">添加</el-button>

    </el-form>


      </div>

      <div class="table">
      <el-table
      :data="tableData"
      border
      style="width: 100%"
      >
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>

      <el-table-column
        prop="name"
        label="属性名称"
        width="180">
      </el-table-column>

      <el-table-column
        prop="category"
        label="属性分类">

          <template slot-scope="scope">
            <span>{{
           arr[scope.row.attribute_category_id]
            }}</span>
          </template>


      </el-table-column>


      <el-table-column
        label="操作">
       <template slot-scope="scope">
          <el-button type="primary" class="bianji" @click="editFn(scope.row.id)">编辑</el-button>
       </template>
      </el-table-column>

    </el-table>
      </div>
      <div class="footer">
         <GoodsFooter @fn2="mashuFn" @fn=" yeshuFn" :total="total" :pageSizes="pageSizes" :currentPage4="currentPage4" />
      </div>
  </div>
</template>

<script>
import GoodsFooter from "../good/GoodsFooter.vue"
const {getAttributeLists,getCategoryLists} = require("../../request/httpApi")
export default {
    data(){
        return {
           ruleForm:{
               input:'',
               region:''
           },
          category:[],
          tableData: [],
          page:'',
          size:'',
          name:'',
          c_id:'',
          //传给子组件的数据
         total:0 ,// 总数
         pageSizes:10,//页数
         currentPage4:1, //当前页
          myid:'',
          obj:{},
          arr:[]
        }
    },
    components:{
        GoodsFooter
    },
    methods:{
      //输入框事件
      inputFn(e){
        // console.log(e);
        this.ruleForm.input = e
      },
      //点击查询
      queryFn(){
      
        if(this.ruleForm.input === ''){
          this.$message.error("请输入查询内容")
          return
        }
          //获得输入框的值 发起请求 
        this.AttributeListFn()
      },
      //页数
      yeshuFn(val){
        // console.log(val);
        this.page = val
        this.AttributeListFn()
      },
      //码数
      mashuFn(val){
        // console.log(val);
        this.size=val
        this.AttributeListFn()
      },
       //请求封装
     AttributeListFn(){
      getAttributeLists({
        page:this.page,
        size:this.size,
        name:this.ruleForm.input,
        c_id:this.ruleForm.region
      }).then( res => {
        // console.log(res);
        this.tableData = res.data.data
        this.total = res.data.count,
        this.pageSizes = res.data.pageSize,
        this.currentPage4 = res.data.currentPage
      })
    },
    //点击添加按钮 跳转路由
    addFn(){
      // console.log(this.$route);
      this.$router.push('/addattribute')
    },
    //点击编辑按钮 跳转路由
    editFn(id){
      // console.log(id);
      this.$router.push(`/editattribute/${id}`)
    }
    },
    
    created(){
     this.AttributeListFn()
     //属性分类
     getCategoryLists().then( res => {
    
       this.category = res.data
       console.log(this.category);

     ///////////////////////////////////////
       this.category.map( item => {
         this.obj[item.id] = item.name
        //  console.log(this.obj);
         this.arr = this.obj
         
       })
      //  console.log(this.arr);
       
     })
    },
    
      
}
</script>

<style lang="less">
    .attibule{
        padding: 10px;
        background-color: #fff;
        .el-table__row{
            height: 57px;
            box-sizing: border-box;
        }
        .bianji{
            width: 56px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-form {
            display: flex;
            .el-button{
                margin-top: 4px;
            }
        }

 
    }
</style>